<template>
  <div class="courseDegree">
    <el-card class="card">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>课程目标达成度管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div v-show="istabel">
          <!-- 搜索框 -->
          <div class="user-search">
            <el-select v-model="query" slot="prepend" placeholder="请选择课程" class="input-with-select"  @change="getLable" ref="S_course">
              <el-option v-for="item of list" :key="item.cid" :label="item.name" :value="item.cid"></el-option>
            </el-select>
            <el-select v-model="version" slot="prepend" placeholder="请选择版本号" class="input-with-select" @input="getgdhead(),watchAll()">
              <el-option v-for="item of clist" :key="item" :label="item" :value="item"></el-option>
            </el-select>
            <el-button type="success" @click="watchAll()">总体达成度</el-button>
            <el-button type="primary" @click="watchSingel()">个体达成度</el-button>
            <el-button type="info" @click="isShow">个体达成度散点图</el-button>
          </div>
          <!-- 总体列表信息 -->
          <div class="text" v-if="firstpiont">
            <div class="tip" @click="updateData1">
            如若数据显示异常，请点击此处更新
            </div>
            <template>
              <el-table
                :data="tableData"
                style="width: 100%"
                height="470"
                v-loading="loading"
                ref="tabel3"
                >
                <el-table-column
                  prop="name"
                  label="课程目标"
                  fixed="left"
                  >
                </el-table-column>
                <el-table-column
                  v-for="item in tableHead"
                  :label="item.label"
                  :prop="item.prop"
                  :key="item.$index"
                  >
                    <template slot-scope="scope">
                      {{scope.row.map[scope.column.property]}}
                    </template>
                </el-table-column>
              </el-table>
            </template>
          </div>
          <!-- 个体列表信息 -->
          <div class="text" v-if="secondpiont">
            <div class="tip" @click="updateData2">
            如若数据显示异常，请点击此处更新
            </div>
            <template>
              <el-table
                :data="tableData2"
                style="width: 100%"
                height="470"
                v-loading="loading"
                ref="table4"
                >
                <el-table-column
                  prop="name"
                  label="课程目标"
                  >
                </el-table-column>
                <el-table-column
                  v-for="item in this.tableHead2"
                  :label="item.name"
                  :prop="item.prop"
                  :key="item.$index"
                  >
                </el-table-column>
              </el-table>
            </template>
          </div>
        </div>
        <div v-show='ischart'>
          <el-page-header @back="goBack" content="个体达成度散点图" class="page_header"></el-page-header>
          <div class="tip" @click="upChartNumber">
            如若数据显示异常，请点击此处更新
          </div>
          <div ref="chart" class="chart_Box"></div>
        </div>
    </el-card>
  </div>
</template>

<script>
var echarts = require('echarts')
export default {
  name: 'courseDegree',
  data () {
    return {
      loading: false,
      ischart: false,
      istabel: true,
      tableData: [],
      tableDatasec: [],
      tableData2: [],
      detailData: [],
      query: '',
      version: '',
      title: '',
      list: [],
      clist: [],
      cname: '',
      firstpiont: true,
      secondpiont: false,
      tableHead: [],
      tableHead2: [],
      listData: [],
      legendData: [],
      data: {
        // 标题
        title: {
          text: '课程个体达成度',
          subtext: ''
        },
        grid: {
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true
        },
        // 鼠标移到散点时显示的信息
        tooltip: {
          // trigger: 'axis',
          showDelay: 0,
          formatter: function (params) {
            if (params.value.length > 1) {
              return params.seriesName + ' :<br/>' +
                params.value[0] + ': ' +
                params.value[1]
            } else {
              return params.seriesName + ' :<br/>' +
                  params.name + ': ' +
                  params.value
            }
          },
          axisPointer: {
            show: true,
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              width: 1
            }
          }
        },
        toolbox: {
          feature: {
            dataZoom: {},
            brush: {
              type: ['rect', 'polygon', 'clear']
            }
          }
        },
        brush: {
        },
        // 标题上的类别
        legend: {
          data: [],
          left: 'center'
        },
        // x轴
        xAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: false
            }
          }
        ],
        // y轴
        yAxis: [
          {
            type: 'value',
            scale: true,
            axisLabel: {
              formatter: '{value}'
            },
            splitLine: {
              show: false
            }
          }
        ],
        // 数据源
        series: []
      }
    }
  },
  components: {},
  mounted () {
    this.loading = true
  },
  methods: {
    // 获取所有课程
    async getassessmentlist () {
      // 需要授权的API必须设置请求头
      const AUTH_TOKEN = sessionStorage.getItem('token')
      this.$http.defaults.headers.common['token'] = AUTH_TOKEN
      // 后台token的key是token
      this.$http.defaults.headers.get['Content-Type'] = 'application/json'
      this.$http.defaults.headers.get['Accept'] = 'application/json'
      const res = await this.$http.get(`course/list?pageNum=1&pageSize=9999&name=`)
      // console.log(res)
      const {code, msg, page} = res.data
      // console.log(this.status)
      if (code === 200) {
        this.loading = false
        this.list = page.list
      } else {
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 总体达成度表格头
    async getgdhead () {
      this.$nextTick(() => {
        this.$refs.tabel3.doLayout()
      })
      const info = {
        cname: this.cname,
        version: this.version
      }
      const res = await this.$http.get(`reach/total_item`, {params: {info}})
      console.log(res)
      // const {status, msg, data} = res.data
      // // console.log(this.status)
      // if (status === 200) {
      //   this.tableHead = data
      //   this.getgdlist()
      // } else {
      //   this.loading = false
      //   // this.tableData = []
      //   this.$message.error(msg)
      // }
    },
    // 总体达成度表格数据
    async getgdlist () {
      const res = await this.$http.get(`reach/total_reach/${this.query}`)
      // console.log(res)
      const {status, msg, data} = res.data
      // console.log(this.status)
      if (status !== 200) {
        this.tableData = []
        this.$message.error(msg)
        this.loading = false
      } else {
        this.loading = false
        this.tableData = data
        this.$nextTick(() => {
          this.$refs.tabel3.doLayout()
        })
      }
    },
    // 更新总体达成度
    async updateData1 () {
      if (this.query) {
        const res = await this.$http.put(`reach/update/total_course/${this.query}`)
        console.log(res)
        const {status, msg, data} = res.data
        // console.log(this.status)
        if (status !== 200) {
          this.tableData = []
          this.$message.error(msg)
          this.loading = false
        } else {
          this.loading = false
          this.tableData = data
          this.$nextTick(() => {
            this.$refs.tabel3.doLayout()
          })
        }
      }
    },
    // 更新个体达成度
    async updateData2 () {
      const res = await this.$http.put(`reach/update/single_course/${this.query}`)
      console.log(res)
      const {status, msg, data} = res.data
      // console.log(this.status)
      if (status === 200) {
        this.tableData2 = data
        this.tableHead2 = [{
          name: '',
          prop: ''
        }]
        this.autoTotalColumes()
        this.loading = false
      } else {
        this.tableData2 = []
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 动态生成全体的达成度的列
    autoTotalColume () {
      this.tableHead.pop()
      this.tableData[0].list.forEach(
        (item, index) => {
          this.tableHead.push({
            name: item.key,
            prop: `list[${index}].value`
          })
        }
      )
    },
    // 获取lable
    async getLable (val) {
      let obj = {}
      obj = this.list.find(item => {
        return item.cid === val
      })
      this.data.title.subtext = obj.name
      this.cname = obj.name
      const res = await this.$http.get(`course/course_version/list/${this.cname}`)
      console.log(res)
      if (res.data.code === 200) {
        this.clist = res.data.cversion_list
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 个体达成度
    async getsingel () {
      const res = await this.$http.get(`reach/single_reach/${this.query}`)
      console.log(res)
      const {status, msg, data} = res.data
      // console.log(this.status)
      if (status === 200) {
        this.tableData2 = data
        this.tableHead2 = [{
          name: '',
          prop: ''
        }]
        this.autoTotalColumes()
        this.loading = false
        this.$nextTick(() => {
          this.$refs.table4.doLayout()
        })
      } else {
        this.tableData2 = []
        this.loading = false
        this.$message.error(msg)
      }
    },
    // 动态生成全体的达成度的列
    autoTotalColumes () {
      this.tableHead2.pop()
      this.tableData2[0].list.forEach(
        (item, index) => {
          this.tableHead2.push({
            name: item.key,
            prop: `list[${index}].value`
          })
        }
      )
    },
    // 进入总体页面
    watchAll () {
      if (this.query) {
        this.firstpiont = true
        this.secondpiont = false
        this.istabel = true
        this.ischart = false
        this.$nextTick(() => {
          this.$refs.tabel3.doLayout()
        })
      } else {
        this.$message.error('请先选择课程！')
      }
    },
    // 进入个体页面
    watchSingel () {
      if (this.query) {
        this.firstpiont = false
        this.secondpiont = true
        this.getsingel()
      } else {
        this.$message.error('请先选择课程!')
      }
    },
    // 查看个体达成度散点图
    isShow () {
      if (this.query) {
        this.istabel = false
        this.ischart = true
        this.getChartNumber()
      } else {
        this.$message.error('请先选择课程!')
      }
    },
    // 返回表格数据页面
    goBack () {
      this.istabel = true
      this.ischart = false
      this.$nextTick(() => {
        this.$refs.tabel3.doLayout()
      })
    },
    // 获取散点图个体达成度数据
    async getChartNumber () {
      const res = await this.$http.get(`reach/stu_aim/${this.query}`)
      console.log(res)
      const {status, msg, data} = res.data
      var turnNum = function (nums) {
        return nums.map(Number)
      }
      if (status === 200) {
        this.listData = data
        const ArrayData = []
        // 类别名处理
        for (var i = 0; i < this.listData.length; i++) {
          this.legendData.push(this.listData[i].name)
          ArrayData.push(this.listData[i].array)
        }
        this.data.legend.data = this.legendData
        let ArrayItem = []
        // 类别下的数据处理
        for (var k = 0; k < ArrayData.length; k++) {
          ArrayItem = ArrayData[k]
          // console.log(ArrayItem)
          this.data.series[k] = {
            name: this.legendData[k],
            type: 'scatter',
            data: [],
            markArea: {
              silent: true,
              itemStyle: {
                color: 'transparent',
                borderWidth: 1,
                borderType: 'dashed'
              },
              data: [[{
                name: this.legendData[k] + '分布区间',
                xAxis: 'min',
                yAxis: 'min'
              }, {
                xAxis: 'max',
                yAxis: 'max'
              }]]
            },
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              lineStyle: {
                type: 'solid'
              },
              data: [
                {type: 'average', name: '平均值'}
                // { xAxis: 1 }
              ]
            }
          }
          for (var j = 0; j < ArrayData[k].length; j++) {
            const item = turnNum(ArrayItem[j])
            this.data.series[k].data.push(item)
          }
        }
        echarts.init(this.$refs.chart).setOption(this.data)
      } else {
        this.$message.error(msg)
      }
    },
    // 更新散点图数据
    async upChartNumber () {
      const res = await this.$http.put(`reach/update/stu_aim/${this.query}`)
      console.log(res)
      const {status, msg, data} = res.data
      var turnNum = function (nums) {
        return nums.map(Number)
      }
      if (status === 200) {
        this.listData = data
        const ArrayData = []
        // 类别名处理
        for (var i = 0; i < this.listData.length; i++) {
          this.legendData.push(this.listData[i].name)
          ArrayData.push(this.listData[i].array)
        }
        this.data.legend.data = this.legendData
        let ArrayItem = []
        // 类别下的数据处理
        for (var k = 0; k < ArrayData.length; k++) {
          ArrayItem = ArrayData[k]
          // console.log(ArrayItem)
          this.data.series[k] = {
            name: this.legendData[k],
            type: 'scatter',
            data: [],
            markArea: {
              silent: true,
              itemStyle: {
                color: 'transparent',
                borderWidth: 1,
                borderType: 'dashed'
              },
              data: [[{
                name: this.legendData[k] + '分布区间',
                xAxis: 'min',
                yAxis: 'min'
              }, {
                xAxis: 'max',
                yAxis: 'max'
              }]]
            },
            markPoint: {
              data: [
                {type: 'max', name: '最大值'},
                {type: 'min', name: '最小值'}
              ]
            },
            markLine: {
              lineStyle: {
                type: 'solid'
              },
              data: [
                {type: 'average', name: '平均值'}
                // { xAxis: 1 }
              ]
            }
          }
          for (var j = 0; j < ArrayData[k].length; j++) {
            const item = turnNum(ArrayItem[j])
            this.data.series[k].data.push(item)
          }
        }
        echarts.init(this.$refs.chart).setOption(this.data)
      } else {
        this.$message.error(msg)
      }
    }
  },
  created () {
    this.getassessmentlist()
  }
}
</script>

<style scoped lang="stylus">
.courseDegree,.card
  height 100%
  min-width: 1200px
  .user-search
    margin-top 15px
    width 100%
    .back-btn
      width 100px
      text-align center
  .text
    padding-top 10px
    .item-support
      color #aaa
      padding-left 30px
      width 100px
.tip
  color #aaa
  cursor pointer
  margin-left 5px
  font-size 13px
.tip:hover
  text-decoration underline
.chart_Box
  width 600px
  height 500px
  margin 15px 0 0 20px
.page_header
  margin 10px 0 5px 0
.el-table .cell
  height: 20px !important
.el-table
  width:99.9%!important
</style>
